<template>
  <div>
    对象数据选择带合并单选
    <SelectObject
      :async-set-table-data="asyncSetTableData"
      :select-config="selectConfig"
      :select-show-view="selectShowView"
      :config="SelectObjectConfig"
      :select-equals="objectEquals"
      :tableMergeConfig="getTableMergeConfig"
    >
    </SelectObject>
  </div>
</template>

<script>
import SelectObject from "@localModules/ZhiXinLib/element-components/select-object/index";
import {SelectConfig} from "@localModules/ZhiXinLib/element-components/dynamic-table/TableType";
import elTableUtils from "@localModules/ZhiXinLib/utils/elTableUtils";
import {demoData, SelectObjectConfig} from "@/views/select-object/data";
let className = true
let oldIndex
export default {
  name: "Demo03",
  components: {
    SelectObject
  },
  data() {
    return {
      renderClass:true,
      SelectObjectConfig,
      selectConfig: new SelectConfig({
        prop: '_selectConfig'
      }),
    }
  },
  methods: {
    selectShowView(item) {
      return item.indexName
    },
    objectEquals(a, b) {
      return a.id === b.id
    },
    getTableMergeConfig(sourceData, selectObjectVm) {
      const mergeTable = elTableUtils.mergeTableRow(sourceData, ['categoryName', 'indexName', 'meaning', 'formula', 'formulaExplain'])
      return {
        mergeTable,
        pageSizes: [30, 60, 90, 120, 150],
        pageSize: 30,
        tableEvent: { // 所有表格的事件
          'select': (selection, row) => {
            selectObjectVm.selectData = elTableUtils.selectionChangeWithRowMerge(mergeTable, selectObjectVm.selectData, row, 'categoryName', selectObjectVm.$refs.DynamicTableRef, this.objectEquals)
          },
          'select-all': (selection) => {
            selectObjectVm.selectData = elTableUtils.selectAllClickWidhRowMerge(mergeTable, selection)
          },
          'row-click': (row, column, event) => {
            selectObjectVm.selectData = elTableUtils.selectionChangeWithRowMerge(mergeTable, selectObjectVm.selectData, row, 'categoryName', selectObjectVm.$refs.DynamicTableRef, this.objectEquals)
            className=true // 单选这里不重置会出现样式错误
            oldIndex=undefined
          },
          'cell-mouse-enter':(row, column, cell, event)=>{
            const rows = elTableUtils.findMergeRowsWithProp(mergeTable,row,'categoryName',this.objectEquals)
            rows.forEach(i=>{
              i.__zhixinMerge=true
            })
            this.renderClass = !this.renderClass
          },
          'cell-mouse-leave':(row, column, cell, event)=>{
            const rows = elTableUtils.findMergeRowsWithProp(mergeTable,row,'categoryName',this.objectEquals)
            rows.forEach(i=>{
              delete i.__zhixinMerge
            })
            this.renderClass = !this.renderClass
          },
        },
        cellClassName:({ row, rowIndex })=>{ // 修改样式列子
          this.renderClass // 挂空触发渲染 记得在data中定义一下
          if(row?.['categoryName-span']?.rowspan > 0 && oldIndex !==rowIndex){
            className=!className
            oldIndex=rowIndex
          }
          if(className){
            if(row.__zhixinMerge){
              return 'class1 class3'
            }
            return 'class1'
          } else {
            if(row.__zhixinMerge){
              return 'class2 class3'
            }
            return 'class2'
          }
        },
        singleTableSelectShow:(selectData=[],tableData=[])=>{ // 单选表格前面选择显示要自己实现
          const findIndex=tableData.findIndex(newItem => this.objectEquals(selectData[0], newItem))
          if(findIndex>-1){
            return findIndex
          } else {
            return undefined
          }
        },
        spanMethod: ({row, column, rowIndex, columnIndex}) => {
          const span = column['property'] + '-span'
          if (row[span]) {
            return row[span]
          }
          const result = elTableUtils.mergeSelectWithOtherProp(row, column, this.selectConfig.prop, 'categoryName')
          if (result) {
            return result
          }
        },
        showSelectData: (selectData = []) => {
          return selectData.filter(i => (i['categoryName-span']?.rowspan || 0) > 0)
        },
        deleteShowSelectData: (delItem, selectData = []) => {
          const findIndex = selectData.findIndex(i => this.objectEquals(i, delItem))
          if (findIndex > -1) {
            return selectData.splice(findIndex, delItem['categoryName-span'].rowspan)
          } else {
            return []
          }
        }
      }
    },
    asyncSetTableData(data, page) {
      return new Promise((resolve, reject) => {
        resolve({
          data: demoData, total: 18
        })
      })
    },
  }
}
</script>

<style lang="scss">
.select-object-dialog {
  .el-table .el-table__row--striped{
    .class1 {
      background-color: #F3F9FD !important;
      &:hover {
        td {
          background-color: #F3FAFF !important;
        }
      }
    }
    .class2 {
      background-color: white !important;
      &:hover {
        td {
          background-color: #F3FAFF !important;
        }
      }
    }
    .class3 {
      background-color: #F3FAFF !important;
      &:hover {
        td {
          background-color: #F3FAFF !important;
        }
      }
    }
  }
  .el-table .el-table__row{
    @extend .el-table__row--striped;
  }
}
</style>
